今天這篇目標進度要來做輸入帳號的驗證

為什麼會有這篇的誕生呢?

原因是因為...我把它給忘了xD

之前在做登入驗證時，偷懶跳過了驗證直接讓帳號通過:

if (this.myAccountId === "aa1234" || this.myAccountId === "aa9876") {
  ...
} else {
  ...
}

藉此機會順便來複習一下API實作及前端介接API吧!!

#API實作

開啟後端(b2e)專案囉~

#Step 1

開啟 /routes/users/index.js 加上路由:

router.get('/accountid/:accountId', userCtrl.userCtrlAccountId);

路由 /accountid/:accountId 對應 controller: userCtrlAccountId

這裡用的是GET方法，要回覆對應的帳號及姓名!!
:accountId 為GET方法帶上的參數

#Step 2

開啟 /controllers/users.controller.js 加上 userCtrlAccountId
將帳號傳入module: userModuleAccountId

• 處理成功時回覆(res) success: true 及module處理結果
• 處理失敗時回覆(res) success: false 及錯誤內容

const userCtrlAccountId = (req, res) => {
    userModule.userModuleAccountId({
        accountId: req.params.accountId
    }).then((moduleResult) => {
        res.send(Object.assign({ success: true }, moduleResult));
    }).catch((error) => {
        res.send(Object.assign({ success: false }, error));
    });
};

module.exports = {
    ...,
    userCtrlAccountId,
}

#Step 3

開啟 /modules/users.module.js 加上 userModuleAccountId
這裡可以用大絕招把 userModuleSignin 貼過來，因為處理的內容都是一樣的
處理內容看這篇 - Day 15. B2E-API連線DB

而且這支更簡單不用判斷密碼
將密碼的部分改為直接回傳帳號及姓名:

resolve({
    accountId: user.accountId,
    username: user.username
});

整個module程式碼:

const userModuleAccountId = (values) => {
    return new Promise((resolve, reject) => {
        MongoClient.connect(mongoDBConnectionUrl, {
            useUnifiedTopology: true
        }).then((client) => {
            client.db(`${config.mongodb.DATABASE}`).collection("users", (error, collection) => {
                if (error) {
                    reject({ message: error });
                } else {
                    collection.findOne({ accountId: values.accountId }).then((user) => {
                        if (user) {
                            resolve({
                                accountId: user.accountId,
                                username: user.username
                            });
                        } else {
                            reject({ message: '無此帳號' });
                        }
                        client.close();
                    });
                }
            });
        }).catch(error => {
            reject({ message: error });
        });
    });
};

module.exports = {
    ...,
    userModuleAccountId,
};

#結果

可以來看POSTMAN怎麼抓資料~

#串接帳號驗證API

複習一下呼叫API的方法:

this.$http({
  method: "POST",
  url: api,
})
  .then((response) => {
    console.log(response);          
  })
  .catch((error) => {
    console.log(error);
  });

在前端使用 $http 設定路徑及方法，成功時跑 then 區塊，失敗時跑 catch 區塊

再來就開啟前端(f2e)專案開始吧~

#Step 1

打開 /components/KeyinUser.vue 檔案，修改輸入帳號驗證的 verifyUser() 方法，前端的表單驗證通過後呼叫帳號驗證API:

verifyUser() {
  if (this.$refs.form.validate()) {
    const api = `${process.env.VUE_APP_APIPATH}/users/accountid/${this.myAccountId}`;
    this.$http({
      method: "GET",
      url: api,
    })
      .then((response) => {
        ...
      })
      .catch((error) => {
        ...
      });
  }
},

呼叫API失敗時(catch)就跳出錯誤內容:

.catch((error) => {
  this.setTextFieldError(false, error);
  this.$refs.form.validate();
});

#Step 2

呼叫API成功時(then) 判斷 success 狀態:

if (response.data.success) {
  ...
} else {
  ...
}

處理失敗時(帳號錯誤或無此帳號)就跳出錯誤內容:

this.setTextFieldError(false, response.data.message);
this.$refs.form.validate();

處理成功時設定姓名並跳轉到輸入密碼頁:

this.$emit("update:username", response.data.username);
this.$router.push({ name: "KeyinPswd" });

#結果

來看看畫面吧~

今日重點:

• 複習API製作過程
• 複習串接API過程

有需要改進或是任何意見建議歡迎下面留言~